<template>

   <div>
      <mt-header fixed title="豆瓣电影" style="background-color:black">
      <span slot="left" style="font-size:15px;color:#93FF93;" @click="open()">设置</span>
      <span slot="right" @click="top">↑</span>
      </mt-header>      
       <mt-popup v-model="popupVisible" position="left" class="demo-popup-left">
            <div class="leftMuH">
                <p class="portrait"></p>
                <p class="userInfo">
                    <span>豆瓣电影</span>
                    <span>懂你的电影App</span>
                </p>
            </div>
            <div class="optionsList">
                <li>会员中心</li>
                <li>我的收藏</li>
                <li>相关介绍</li>
                <li>功能说明</li>
                <li>使用指南</li>
                <li>意见反馈</li>
                <li>版本说明  v5.2.0</li>
            </div>
        </mt-popup>
      <mt-navbar v-model="selected">
  <mt-tab-item id="1"><router-link to="/login">账号登陆</router-link></mt-tab-item>
  <mt-tab-item id="3"><router-link to="/components/order">我的收藏</router-link></mt-tab-item>
  <mt-tab-item id="4"><router-link to="/help">使用条款</router-link></mt-tab-item>
</mt-navbar>
<!-- tab-container -->
<mt-tab-container v-model="selected" style="min-height:500px">
  <mt-tab-container-item id="1">
<router-view></router-view>
  </mt-tab-container-item>
  <mt-tab-container-item id="3">
 <router-view></router-view>
  </mt-tab-container-item>
    <mt-tab-container-item id="4">
    <router-view></router-view>
  </mt-tab-container-item>
</mt-tab-container>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                title: '主页',
                articles:[],
                selected:"",
                popupVisible:false,
            }
        },
        mounted: function() {

  },
methods:{
    top:function(){
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0
    },
    open:function(){
    this.popupVisible = true;
    },
},
    }
</script>
<style>
body{
    background-color:black;
}
.list-group-item{
    color:black;
    background-color:white;
}
.demo-popup-left {
        width: 80%;
        height: 100%;
        position: absolute;
        background: white;
    }
    .leftMuH{
        height: 30vh;
        padding-top: 15vh;
        background:url("../assets/landing_bg.jpg") no-repeat center;
        background-size: cover;
        display: flex;
    }
    .portrait{
        width:80px;
        height:80px;
        background: url("../assets/head_portrait.jpg") no-repeat center;
        background-size:cover ;
        border-radius: 40px;
        margin: 0 8%;
    }
    .userInfo{
        color: #00e09e;
    }
    .optionsList{
        background: #fff;
    }
      .optionsList li{
        border-bottom: 1px #999999 solid;
        font-size: 1.6rem;
        line-height: 6vh;
        padding-left: 2rem;
        color: #333;
        display:flex;
    }
       .optionsList li:hover{
        background: #999;
    }
</style>
